<template>
	<div class="bill-container">
		<ShopHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder"
			:aimUrl="dataArr.aimUrl"
			:rightUrl="dataArr.rightUrl"
		/>
		<div class="top-zhanwei"></div>
		<div class="checkoutMsg">
			<p :class="index==(itemArr.length-1)?'content-list':'content-list borderBot'" v-for="(item,index) in itemArr " :key="index">
				<span>{{item}}</span>
				<i class="iconfont icon-iconfontyoujiantou"></i>
			</p>
		</div>
		<!-- {{getCounter}} -->
	</div>
</template>
<script>
	import ShopHeader from "../../components/shopheader"
	export default{
		name:'bill',
		data(){
			return{
				itemArr:[
					"充值",
					"充值记录",
					"购买记录",
					"VIP服务"
				],
				dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:""
						}
					],
					placeholder:"我的账单",
					aimUrl:"/layout/mine",
					rightUrl:''
				}
			}
		},
		components:{
			ShopHeader
		}
		// computed:{
		// 	getCounter(){
		// 		this.$store.dispatch("updateOrder",["oushishafa","3000"])
		// 		this.$store.dispatch("updateOrder",["zhenpishafa","5000"])
		// 		return console.log(this.$store.getters.getOrder);
		// 	}
		// }
	}
</script>
<style scoped lang="less">
	.bill-container{
		width: 100%;
		background-color: #fff;
		// overflow: hidden;
		.top-zhanwei{
			width: 100%;
			height: 88 / 2 / 50rem;
		}
		.checkoutMsg{
			width: 95%;
			margin: 20 / 50rem auto;
			box-shadow: 0 0 10 / 50rem 1 / 50rem rgba(0,0,0,.1);
			border-radius: 10 / 2 / 50rem;
			p.borderBot{
				border-bottom: 2 / 50rem solid rgba(0,0,0,.1);
			}
			.content-list{
				width: 100%;
				color: #333;
				font-size: 13 / 50rem;
				font-weight: 700;
				padding: 28 / 2 / 50rem 20 / 2 / 50rem;
				box-sizing: border-box;
				position: relative;
				i{
					font-size: 18 / 50rem;
					position: absolute;
					right: 0;
					top: 28 / 2 / 50rem
				}
			}
		}
	}
</style>